<template>
  <div v-loading="recommendLoading">
    <div class="fs-l bold" style="line-height: 40px">
      安居客三网通推荐户室号:
    </div>
    <template v-if="recommendHushihao.length">
      <div class="fs-xl d-flex ai-center text-blue recommend-hsh text-center">
        <template v-for="(item, i) in recommendHushihao.slice(0, 3)">
          <div :key="item.id" @click="handleSelectHushihao(item, i)">
            <slot name="subitem" :subitem="item">
              <div class="recommend-hsh-item pointer" :class="{ select: recommendSelectIndex == i }">
                {{ item | recommendFormat }} <br />
                {{ item.buildingArea | sizeFormat }}
              </div>
            </slot>
          </div>
        </template>

        <template v-if="recommendHushihao.length > 3">
          <div @click="handleShowMoreHushihao">
            <slot name="more">
              <div class="recommend-hsh-item pointer more">点击查看更多 <br />推荐户室号</div>
            </slot>
          </div>
        </template>
      </div>
    </template>
    <div v-else>暂无推荐数据...</div>

    <!-- 推荐户室号更多的弹层 -->
    <el-dialog title="安居客三网合一推荐户室号" :visible.sync="recommendHushihaoDialog" width="630px" append-to-body>
      <div class="fs-xl d-flex ai-center text-blue recommend-hsh text-center flex-wrap">
        <template v-for="(item, i) in recommendHushihao">
          <div
            class="recommend-hsh-item pointer"
            :class="{ select: recommendSelectIndex == i }"
            :key="item.id"
            @click="handleSelectHushihao(item, i)"
          >
            {{ item | recommendFormat }} <br />
            {{ item.buildingArea | sizeFormat }}
          </div>
        </template>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { debounce } from '@/utils/utilsNew';
import { recommendHouseList } from '@/api/user';
export default {
  name: '',
  components: {},
  props: {
    noPortAccount: Number,
    houPortInfo: Array,
    houDelVO: Object,
  },
  data() {
    return {
      recommendLoading: false, //推荐户室号加载
      recommendHushihao: [], //推荐的户室号数据
      recommendSelectIndex: -1,
      recommendHushihaoDialog: false, //推荐户室号更多数据
      isFirstFetchRecommendHushihao: true, //首次请求户室号
    };
  },
  created() {
    this.renderHushihaoRecommend = debounce(this.renderHushihaoRecommend.bind(this), 1000);
    this.recommendUpdate = debounce(this.recommendUpdate.bind(this), 1000);

    this.$bus.$on('info:recommendUpdate', () => {
      this.recommendUpdate();
    });
    this.$once('hook:beforeDestroy', () => {
      this.$bus.$off('info:recommendUpdate');
    });
  },
  mounted() {},
  filters: {
    recommendFormat(item) {
      let buildingName = item.buildingName ? item.buildingName + '栋' : '';
      let buildingUnitName = item.buildingUnitName ? item.buildingUnitName + '单元' : '';
      let houseName = item.houseName ? item.houseName + '室' : '';
      return buildingName + buildingUnitName + houseName;
    },
  },
  watch: {},
  computed: {},
  methods: {
    // 渲染户室号推荐信息
    renderHushihaoRecommend: (function() {
      let oldId;
      let oldBs;
      return function() {
        if (this.noPortAccount != 1) return;

        // 先固定是安居客AJK平台
        let info = this.houPortInfo.find((v) => v.portType == this.PORT_CODE_AJK);
        if (!info || !info.platformResblockId) return;

        let buildSize = this.houDelVO.buildSize;
        if (info.platformResblockId && buildSize) {
          if (oldId == info.platformResblockId && oldBs == buildSize && !this.isFirstFetchRecommendHushihao) {
            return;
          };
          this.isFirstFetchRecommendHushihao = false;

          oldId = info.platformResblockId;
          oldBs = buildSize;

          this.recommendSelectIndex = -1;
          this.recommendLoading = true;
          recommendHouseList({
            resblockId: info.platformResblockId,
            buildingArea: buildSize,
            siteCode: info.portType,
          }).then(({ content, isSuccess }) => {
            this.recommendLoading = false;
            if (!isSuccess) return;

            this.recommendHushihao = content || [];
          });
        }
      };
    })(),

    // 重新推荐户室号
    recommendUpdate() {
      if (this.noPortAccount != 1) return;

      // 先固定是安居客AJK平台
      let info = this.houPortInfo.find((v) => v.portType == this.PORT_CODE_AJK);
      if (info.publishSize > 0 && info.platformResblockId) {
        this.recommendSelectIndex = -1;
        this.recommendLoading = true;

        recommendHouseList({
          resblockId: info.platformResblockId,
          buildingArea: info.publishSize,
          siteCode: info.portType,
        }).then(({ content, isSuccess }) => {
          this.recommendLoading = false;
          if (!isSuccess) return;
          this.recommendHushihao = content || [];
        });
      }
    },

    // 选择推荐的户室号
    handleSelectHushihao(item, i) {
      // console.log(item);
      this.$emit('handleSelectHushihao', item);
      this.recommendSelectIndex = i;
      if (this.recommendHushihaoDialog) {
        this.recommendHushihaoDialog = false;
      }
    },

    handleShowMoreHushihao() {
      this.recommendHushihaoDialog = true;
    },
  },
};
</script>
<style scoped>
.recommend-hsh {
  max-height: 300px;
  overflow-y: auto;
}
.recommend-hsh-item {
  width: 170px;
  padding: 10px 0;
  border: 1px solid rgb(37, 146, 251);
  border-radius: 5px;
  margin-right: 20px;
  margin-bottom: 15px;
}
.recommend-hsh-item.more {
  color: white;
  background-color: rgb(37, 146, 251);
}
.recommend-hsh-item.select {
  background-color: #e6f5ff;
}
</style>
